<!-- props说明： -->
<!--
  iconList: 
  存储图标的数组对象，每个对象对应的属性分别如下：
  iconRotateDeg：图标属性过渡（旋转、颜色变换等等）的延迟秒数（不建议更改，如果要更改，最好是连续的数字
  iconColor：图标显示的颜色，以及鼠标放到图标上的时候显示的背景色
  iconFont：icon图标（此处推荐 iconfont 上的字体图标）
-->
<!-- menuWidth、menuHeight：菜单盒子的宽度和高度（盛放icon图标的盒子，宽高等比例）-->
<!--
  spanSize：小菜单span的宽高（等比例）
  transformOrigin：icon的旋转中心，必须是宽度的一般
  translateX：小菜单span水平移动的距离（menuSize / 2 - spanWidth）
-->
<script setup>
defineProps({
  iconList: {
    type: Array,
    default: () => [
      {
        iconRotateDeg: 0,
        iconColor: "#ff2972",
        iconFont: "icon-home"
      },
      {
        iconRotateDeg: 1,
        iconColor: "#fee800",
        iconFont: "icon-more"
      },
      {
        iconRotateDeg: 2,
        iconColor: "#04fc43",
        iconFont: "icon-gift"
      },
      {
        iconRotateDeg: 3,
        iconColor: "#fe00f1",
        iconFont: "icon-setting"
      },
      {
        iconRotateDeg: 4,
        iconColor: "#00b0fe",
        iconFont: "icon-message"
      },
      {
        iconRotateDeg: 5,
        iconColor: "#fea600",
        iconFont: "icon-cart"
      },
      {
        iconRotateDeg: 6,
        iconColor: "#a529ff",
        iconFont: "icon-money"
      },
      {
        iconRotateDeg: 7,
        iconColor: "#01bdab",
        iconFont: "icon-star"
      }
    ]
  },
  iconListLength: {
    type: Number,
    default: 8
  },
  menuSize: {
    type: Number,
    default: 200
  },
  btnSize: {
    type: Number,
    default: 60
  },
  spanSize: {
    type: Number,
    default: 40
  }
});
</script>

<template>
  <div class="menu">
    <div class="btn">
      <i class="iconfont icon-add"></i>
    </div>
    <span
      v-for="{ iconRotateDeg, iconColor, iconFont } in iconList"
      :key="`${iconRotateDeg}-${iconColor}`"
      :style="{ '--i': iconRotateDeg, '--clr': iconColor }"
    >
      <i class="iconfont" :class="iconFont"></i>
    </span>
  </div>
</template>

<style scoped>
/* 设置基本样式 - 菜单盒子，设置宽带高底色 */
.menu {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: v-bind(menuSize + "px");
  height: v-bind(menuSize + "px");
  border-radius: 50%;
  background-color: gray;
}

/* 给 + 定位，设置圆角，内容居中 */
.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 1000;
  width: v-bind(btnSize + "px");
  height: v-bind(btnSize + "px");
  border-radius: 50%;
  border: 2px solid #fff;
  background-color: #303640;
  color: #fff;
  cursor: pointer;
  transition: all 1.25s;
}

.btn i {
  font-size: 32px;
}

/* 添加八个按钮，并且居中圆角 */
.menu span {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  width: v-bind(spanSize + "px");
  height: v-bind(spanSize + "px");
  border-radius: 50%;
  border: 2px solid #01bdab;
  background-color: #303640;
  color: #01bdab;
  cursor: pointer;
}

/* 设置 hover 旋转效果 */
.menu span {
  transform-origin: v-bind(menuSize / 2 + "px");
  transition: 0.5s;
  /* 延迟 */
  transition-delay: calc(0.1s * var(--i));
  transform: rotate(0deg) translateX(v-bind(menuSize / 2 - spanSize / 2 + "px"));
  color: var(--clr);
  border: 2px solid var(--clr);
}

.menu:hover span {
  transform: rotate(calc(360deg / v-bind(iconListLength) * var(--i)));
}

.menu span:hover {
  background-color: var(--clr);
  color: #333;
  box-shadow:
    0 0 10px var(--clr),
    0 0 30px var(--clr),
    0 0 50px var(--clr);
  transition: 0s;
}

/* 设置默认角度，保证旋转后图标是正的 */
.menu span i {
  transform: rotate(calc(360deg / v-bind(-iconListLength) * var(--i)));
}

/* 设计 hover 旋转效果 */
.menu:hover .btn {
  transform: rotate(315deg);
}
</style>
